<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-01 10:48:05
 * @LastEditTime : 2021-09-09 10:24:32
 * @FilePath     : /newhope/src/page/gameSuccess/index.vue
 * @Description  : 
-->
<script setup lang="ts">
import writedownBlessings from "/@/assets/images/writedownBlessings.png";
import awesome from "/@/assets/images/awesome.png";
import { useStore } from 'vuex'
import { PageProps as gameSuccessPageProps } from "./define";
import { useQuery } from "/@/hooks/query";
import { useGo } from "/@/hooks/go";
const store = useStore()
const [go] = useGo();
const [query] = useQuery<gameSuccessPageProps>();
function clickHander() {
  go({ name: "clickSave" });
}
</script>

<template>
  <div class="gameSuccess">
    <div class="awesomeBox tan">
      <img :src="awesome" alt="awesome" class="awesome" />
      <div class="text">
        <div class="textContent">
          哇！太牛啦！
          <br />
          恭喜你找到{{ query.num }}瓶牛奶
          <br />
          战胜{{ store.state.user.wins[query.num] || "0" }}%的玩家
          <br />成功帮助澳特兰牛奶家族团圆欢聚
        </div>
      </div>
    </div>
    <img :src="writedownBlessings" @click="clickHander" class="writedownBlessings an" alt="写下祝福" />
  </div>
</template>

<style lang="scss" scoped>
.tan {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: translateX(-50%) scale3d(1.25, 0.75, 1);
    transform: translateX(-50%) scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: translateX(-50%) scale3d(0.75, 1.25, 1);
    transform: translateX(-50%) scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: translateX(-50%) scale3d(1.15, 0.85, 1);
    transform: translateX(-50%) scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: translateX(-50%) scale3d(0.95, 1.05, 1);
    transform: translateX(-50%) scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: translateX(-50%) scale3d(1.05, 0.95, 1);
    transform: translateX(-50%) scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: translateX(-50%) scale3d(1.25, 0.75, 1);
    transform: translateX(-50%) scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: translateX(-50%) scale3d(0.75, 1.25, 1);
    transform: translateX(-50%) scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: translateX(-50%) scale3d(1.15, 0.85, 1);
    transform: translateX(-50%) scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: translateX(-50%) scale3d(0.95, 1.05, 1);
    transform: translateX(-50%) scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: translateX(-50%) scale3d(1.05, 0.95, 1);
    transform: translateX(-50%) scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
}

.an {
  -webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: shake-top 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(-50%) rotate(-4deg);
    transform: translateX(-50%) rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
  80% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }
  90% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(-50%) rotate(-4deg);
    transform: translateX(-50%) rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
  80% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }
  90% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}

.gameSuccess {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/gameDescriptionBkg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .writedownBlessings {
    position: absolute;
    top: 402px;
    left: 50%;
    transform: translateX(-50%);
    width: 284px;
    height: 42px;
  }
  .awesomeBox {
    position: absolute;
    top: 188px;
    left: 50%;
    transform: translateX(-50%);
    width: 311px;
    height: 181px;
    .text {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      .textContent {
        position: relative;
        height: 100%;
        width: 100%;
        padding: 21px 14px;
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 34px;
        letter-spacing: 2px;
        color: #bd010c;
        text-align: center;
      }
    }
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
